<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { useTagsViewStoreHook } from '@/stores/modules/tagsView'
import type { TagView } from '@/stores/modules/types/tagsViewState'

const route = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStoreHook()

// 获取主题
const token = getThemeTokenHook()

// 设置当前激活的标签页
function setActiveKey() {
  tagsViewStore.setActiveTag(route.path == '/welcome' ? '/' : route.path)
}

// 点击标签页
function handleTagsItem(item: TagView) {
  tagsViewStore.setActiveTag(item.path)
  router.replace({ path: item.path })
}

// 刷新页面
function refreshPage() {
  window.location.reload()
}

watch(
  () => route.path,
  () => {
    setActiveKey()
    tagsViewStore.addTagsView(route.path, (route.meta as any).title)
  },
  {
    deep: true
  }
)

onMounted(() => {
  setActiveKey()
  tagsViewStore.addTagsView(route.path, (route.meta as any).title)
})
</script>
<template>
  <div
    :style="{
      background: token.colorBgBase,
      borderBottom: `1px solid ${token.colorBorderSecondary}`
    }"
    class="tags-view"
  >
    <div
      v-for="(item, index) in tagsViewStore.tagsViewList"
      :key="item.path"
      @click="handleTagsItem(item)"
    >
      <a-dropdown :trigger="['contextmenu']">
        <div
          :class="[{ 'tags-item-active': tagsViewStore.activeTag === item.path }]"
          :style="{
            background: token.colorBgTextHover
          }"
          class="tags-item"
        >
          {{ item.title }}
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item style="font-size: 12px" @click="refreshPage">刷新页面</a-menu-item>
            <a-menu-item
              style="font-size: 12px"
              @click="tagsViewStore.closeCurrent(item, handleTagsItem)"
              >关闭当前</a-menu-item
            >
            <a-menu-item style="font-size: 12px" @click="tagsViewStore.closeLeft(item)"
              >关闭左侧</a-menu-item
            >
            <a-menu-item style="font-size: 12px" @click="tagsViewStore.closeRight(item)"
              >关闭右侧</a-menu-item
            >
            <a-menu-item style="font-size: 12px" @click="tagsViewStore.closeOther(item)"
              >关闭其它</a-menu-item
            >
            <a-menu-item
              style="font-size: 12px"
              @click="tagsViewStore.closeAll(item, handleTagsItem)"
              >全部关闭</a-menu-item
            >
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<style scoped>
.popupClassName {
  font-size: 10px;
}
.tags-view {
  background: white;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100vw;
  padding: 10px 15px;
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 所有元素在一行显示 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  position: relative; /* 设置为相对定位，以便为滚动条的绝对定位提供参照 */
  .tags-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    height: 25px;
    border-radius: 5px;
    margin-right: 8px;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 12px;
    color: #5f5f5f;
    transition: all 0.2s;

    &:hover {
      background: v-bind(token.colorPrimary) !important;
      color: #fff;
    }
  }
  .tags-item-active {
    background: v-bind(token.colorPrimary) !important;
    color: #fff;
  }
}
/* 滚动条默认样式 */
.tags-view::-webkit-scrollbar {
  width: 0; /* 滚动条宽度 */
  height: 0; /* 滚动条高度 */
  background-color: transparent; /* 滚动条背景色透明 */
  position: absolute; /* 绝对定位 */
}

/* 滚动条轨道样式 */
.tags-view::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景透明 */
}

/* 滚动条滑块样式 */
.tags-view::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滑块背景色 */
  border-radius: 6px; /* 滑块圆角 */
  border: 3px solid transparent; /* 滑块边框透明 */
}

/* 鼠标悬停时滚动条滑块样式 */
.tags-view:hover::-webkit-scrollbar-thumb {
  background-color: #a8a8a8; /* 鼠标悬停时滑块的背景色 */
}

/* 鼠标悬停时滚动条轨道样式 */
.tags-view:hover::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
</style>
